import React,{useEffect} from 'react';
import { Breadcrumb } from 'antd';
import { Link,useLocation } from 'react-router-dom';
import { useSelector,useDispatch } from 'react-redux';
import {clearcrumb,HighlightKeyChange} from '../../store/reducer/tab.js'
import './index.css'
import Item from 'antd/es/list/Item.js';
const CommonBreadcrumb=()=>{
	const BreadcrumbList=useSelector((state)=>{return state.tab.crumbList})
	const location=useLocation()
	const dispatch=useDispatch()
	function itemRender(route, params, items, paths){
	
	 const isLast=route.path===items[items.length-1].path
	 return isLast?(
			<span >{route.title}</span>
		)
		:
		(<Link to={route.path} onClick={()=>{handleClick(route.path)}}>{route.title}</Link>)
	}
	const handleClick=(e)=>{
		// console.log(e,'e');
		dispatch(clearcrumb(e))
		dispatch(HighlightKeyChange(e))
		// dispatch(clearcrumb(location.pathname)
		
		

	}
	return (
		<Breadcrumb className='common-breadcrumb' items={BreadcrumbList} itemRender={itemRender} >
		</Breadcrumb>
	)
}
export default CommonBreadcrumb